import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Book } from '../constant/book';

const BookList = () => {
  const [books, setBooks] = useState<Book[]>([]);
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [publishedDate, setPublishedDate] = useState('');

  useEffect(() => {
    // axios.get('/api/books')
  }, []);

  const addBook = () => {
    // axios.post('/api/books', { title, author, publishedDate }).then(response => {
    //   setBooks([...books, response.data]);
    // });
  };

  return (
 
    <div>
      <h1>Book List</h1>
      <ul>
        {books.map(book => (
          <li key={book.id}>
            {book.title} by {book.author} (Published on {new Date(book.publishedDate).toLocaleDateString()})
          </li>
        ))}
      </ul>
      <h2>Add a New Book</h2>
      <form onSubmit={(e) => { e.preventDefault(); addBook(); }}>
        <div>
          <label>Title:</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Author:</label>
          <input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} />
        </div>
        <div>
          <label>Published Date:</label>
          <input type="date" value={publishedDate} onChange={(e) => setPublishedDate(e.target.value)} />
        </div>
        <button type="submit">Add Book</button>
      </form>
    </div>
  );
};

export default BookList;